<template>
<div>
    <ul class="cus-card-list">
        <li v-for="item in articles">
            <router-link :to="{name:'module_article_detail',params:{id:item.id}}">
                <span class="cus-card-list-icon"><Icon type="ios-paper-outline"></Icon></span>
                {{item.title.length > 13?item.title.substring(0,13)+'...':item.title}}
                <span class="cus-card-list-time" style="float:right;">{{item.formated_create_time}}</span>
            </router-link>
        </li>
    </ul>
    <!-- <div style="text-align:center">
        <AutoPage v-model="article_page" :auto="false"></AutoPage>
    </div> -->
</div>
</template>

<script>
import Page from "@/common/model/Page";
import AutoPage from "@/common/components/AutoPage";
import Article from "@/common/model/Article";

export default {
    components: {
        AutoPage
    },
    data() {
        return {
            article_page: new Page("search/article"),
        };
    },
    computed: {
        articles() {
            return Article.parseList(this.article_page.list);
        },
        module_name() {
            return this.$route.params.name ? this.$route.params.name : "*";
        },
        p_type() {
            return this.$route.params.p_type ? this.$route.params.p_type : "*";
        }
    },
    methods: {
        fetchData() {
            this.article_page.action_data = { m_type: this.module_name, p_type: this.p_type };
            this.article_page.getData();
        }
    },
    created() {
        this.fetchData();
    },
    watch: {
        "$route": "fetchData"
    }
}
</script>

<style scoped>
    .cus-card{
        font-family: "微软雅黑";
        width: 100%;
        margin-top: 10px;
    }
    .cus-card-title{
        font-size: 16px;
        font-weight: 700;
        border-bottom: 1px solid #ddd;
        /* background: url(../images/title_bg.png) repeat-x; */
    }
    .cus-card-title-more {
        float: right;
        font-size: 12px;
    }
    .cus-card-list a{
        display: block;
        width:100%;
        height:30px;
        line-height: 30px;
        font-size: 14px;
        text-decoration:none;
        color:#000000; 
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .cus-card-list-time {
        font-size:12px;
        color:#9ea7b4;
    }
    .cus-card-list-icon{
        color: rgb(11, 70, 163);
    }
</style>